<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useSalesStore } from '@/store';

  const modalVisible = ref(false);
  const salesStore = useSalesStore();
  const detail = ref<any>({});
  const list = ref<any>([]);
  const searchForm = ref<any>({});

  async function fetchList() {
    list.value = await salesStore.getCompanies(searchForm.value);
  }
  async function handleRemove(record: any) {
    await salesStore.deleteCompany({ id: record.id });
    await fetchList();
  }

  function handleAdd() {
    detail.value = {};
    modalVisible.value = true;
  }

  function handleEdit(record: any) {
    detail.value = record;
    modalVisible.value = true;
  }

  async function handleSave() {
    await salesStore.saveCompany(detail.value);
    await fetchList();
    modalVisible.value = false;
  }

  async function handleSearch() {
    await fetchList();
  }

  async function handleReset() {
    searchForm.value = {};
    await fetchList();
  }

  onMounted(() => {
    fetchList();
  });
</script>

<template>
  <div class="container">
    <breadcrumb :items="['menu.sales.management', 'menu.company.list']" />
    <a-card>
      <a-row :gutter="16">
        <a-col flex="auto" style="padding-right: 16px">
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="公司名称" style="margin-bottom: 0">
                <a-input placeholder="请输入公司名称" v-model="searchForm.name"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="auto" style="border-left: 1px solid #e5e6eb; padding-left: 16px">
          <a-space>
            <a-button type="primary" @click="handleSearch()">搜索</a-button>
            <a-button type="primary" @click="handleReset()">重置</a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider margin="16px"></a-divider>
      <a-button type="primary" style="margin-bottom: 16px" @click="handleAdd" size="small">新增</a-button>
      <a-table :data="list">
        <template #columns>
          <a-table-column title="序号" :width="80">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="公司名称" data-index="name"></a-table-column>
          <a-table-column title="创建时间" data-index="createdAt" :width="180"></a-table-column>
          <a-table-column title="操作" :width="120">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" @click="handleEdit(record)" size="small">编辑</a-button>
                <a-popconfirm content="您确认移除么?" @ok="handleRemove(record)">
                  <a-button type="primary" status="danger" size="small">移除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" :title="detail.id ? '编辑' : '新增'" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width>
        <a-form-item label="公司名称" required>
          <a-input v-model="detail.name" placeholder="请输入公司名称" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 0 16px;
  }
</style>
